Mi react-dropzone 'accept': { .. } parece ignorarse por completo cuando estoy cargando archivos.

Mi useDropzone({}) :

 const {getRootProps, getInputProps, isDragActive} = useDropzone({ onDrop, noClick: true, 'accept': { 'video/mp4': ['.mp4', '.MP4'], }, })

Mi devolución de llamada onDrop :

 const onDrop = useCallback((acceptedFiles, rejectedFiles) => { let test = acceptedFiles.length || rejectedFiles.length ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files` : "Try dropping some files."; console.log(test); if (acceptedFiles.length > 0) { setSelectedFiles(acceptedFiles); } acceptedFiles.forEach((file, index, array) => { const reader = new FileReader() reader.onabort = (event) => { console.log('file reading was aborted') } reader.onerror = (event) => { console.log('file reading has failed') } reader.onload = (event) => { // Do whatever you want with the file contents const binaryStr = reader.result console.log(binaryStr) } reader.readAsArrayBuffer(file) }) }, [])

El código:

 let test = acceptedFiles.length || rejectedFiles.length ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files` : "Try dropping some files.";

siempre devuelve: Accepted 1, rejected 0 files

pase lo que pase, el rejected siempre será 0 incluso cuando cargue pdf , jpg , txt , etc.

Aquí está el enlace de codesandbox:https://codesandbox.io/s/kind-frost-zmyhd8?file=/pages/index.js

Alguien sabe lo que está mal con mi código?